<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useResumeStore } from '../stores/resumeStore';

const router = useRouter();
const resumeStore = useResumeStore();
const loading = ref(false);

const createNewResume = async () => {
  try {
    loading.value = true;
    const newResume = await resumeStore.createResume({
      name: '新建简历'
    });
    router.push(`/resume/edit/${newResume.id}`);
  } catch (error) {
    console.error('创建简历失败:', error);
  } finally {
    loading.value = false;
  }
};

const goToResumeList = () => {
  router.push('/resume/list');
};
</script>

<template>
  <div class="home-container">
    <!-- 欢迎区域 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 mb-8">
      <h1 class="text-3xl font-bold mb-4 text-primary">欢迎使用简历大师</h1>
      <p class="text-lg mb-6 text-gray-600 dark:text-gray-300">
        简历大师是一款专业的在线简历制作工具，帮助您轻松创建精美的简历，提升求职竞争力。
      </p>
      <div class="flex flex-wrap gap-4">
        <a-button type="primary" size="large" @click="createNewResume" :loading="loading">
          <template #icon><PlusOutlined /></template>
          创建新简历
        </a-button>
        <a-button size="large" @click="goToResumeList">
          <template #icon><UnorderedListOutlined /></template>
          我的简历
        </a-button>
      </div>
    </div>

    <!-- 功能介绍 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <div class="text-primary text-4xl mb-4">
          <FormOutlined />
        </div>
        <h3 class="text-xl font-bold mb-2">简单易用</h3>
        <p class="text-gray-600 dark:text-gray-300">
          直观的界面设计，拖拽编辑，所见即所得，无需专业设计知识。
        </p>
      </div>
      
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <div class="text-primary text-4xl mb-4">
          <AppstoreOutlined />
        </div>
        <h3 class="text-xl font-bold mb-2">多样模板</h3>
        <p class="text-gray-600 dark:text-gray-300">
          提供多种专业设计的简历模板，适合不同行业和职位需求。
        </p>
      </div>
      
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <div class="text-primary text-4xl mb-4">
          <DownloadOutlined />
        </div>
        <h3 class="text-xl font-bold mb-2">导出分享</h3>
        <p class="text-gray-600 dark:text-gray-300">
          一键导出PDF格式简历，方便投递和分享，提高求职效率。
        </p>
      </div>
    </div>

    <!-- 使用步骤 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
      <h2 class="text-2xl font-bold mb-6 text-center">三步完成专业简历</h2>
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="text-center p-4 flex-1">
          <div class="bg-primary bg-opacity-10 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
            <span class="text-primary text-2xl font-bold">1</span>
          </div>
          <h3 class="text-lg font-bold mb-2">选择模板</h3>
          <p class="text-gray-600 dark:text-gray-300">从多种专业设计的模板中选择适合您的风格</p>
        </div>
        
        <div class="hidden md:block text-primary text-2xl">→</div>
        
        <div class="text-center p-4 flex-1">
          <div class="bg-primary bg-opacity-10 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
            <span class="text-primary text-2xl font-bold">2</span>
          </div>
          <h3 class="text-lg font-bold mb-2">填写内容</h3>
          <p class="text-gray-600 dark:text-gray-300">添加您的个人信息、教育背景、工作经验等</p>
        </div>
        
        <div class="hidden md:block text-primary text-2xl">→</div>
        
        <div class="text-center p-4 flex-1">
          <div class="bg-primary bg-opacity-10 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
            <span class="text-primary text-2xl font-bold">3</span>
          </div>
          <h3 class="text-lg font-bold mb-2">导出简历</h3>
          <p class="text-gray-600 dark:text-gray-300">一键导出PDF格式，随时投递和分享</p>
        </div>
      </div>
    </div>

    <!-- 开始使用按钮 -->
    <div class="text-center mb-8">
      <a-button type="primary" size="large" @click="createNewResume" :loading="loading">
        立即开始使用
      </a-button>
    </div>
  </div>
</template>

<script lang="ts">
import { PlusOutlined, UnorderedListOutlined, FormOutlined, AppstoreOutlined, DownloadOutlined } from '@ant-design/icons-vue';

export default {
  components: {
    PlusOutlined,
    UnorderedListOutlined,
    FormOutlined,
    AppstoreOutlined,
    DownloadOutlined
  }
};
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
}
</style>